<template>
  <div class="line-chart-container">
    <div ref="lineChart" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import moment from 'moment';

export default {
  name: "SalesLineChart",
  data() {
    return {
      chartInstance: null,   // ECharts实例引用
      eventSource: null,     // SSE连接对象
      option: {              // 图表基础配置
        title: {
          text: '销售额实时监控',
          left: 'center',
          textStyle: { fontSize: 18 }
        },
        tooltip: { trigger: 'axis' },
        grid: {
          left: '5%',  // 留出足够的边距
          right: '15%',
          top: '15%',   // 为标题和图例留出空间
          bottom: '15%',
          containLabel: true  // 保证标签也在布局内
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Q1', 'Q2', 'Q3', 'Q4'] // 季度分类轴
        },
        yAxis: {
        type: 'value',
        axisLabel: {
          formatter: (value) => {
            if (value >= 1e8) {
              return `${(value / 1e8).toFixed(2)} 亿`;
            } else if (value >= 1e4) {
              return `${(value / 1e4).toFixed(2)} 万`;
            } else {
              return `${value} 元`;
            }
          }
        }
      },

        series: [{
          name: '销售额',
          type: 'line',
          data: [],          // 动态数据容器
          markLine: {
            data: [{type: 'average', name: '平均值'}]
          },
          smooth: true,
          areaStyle: { color: 'rgba(64,158,255,0.2)' } // 区域填充样式
        }]
      }
    };
  },
  mounted() {
    this.initChart();
    this.initSSE();          // 组件挂载时建立SSE连接
    window.addEventListener('resize', this.resizeChart);
  },
  methods: {
    /** 初始化ECharts实例并应用基础配置 */
    initChart() {
      this.chartInstance = echarts.init(this.$refs.lineChart);
      this.chartInstance.setOption(this.option);
    },

    /** 建立SSE连接并配置数据监听 */
    initSSE() {
      // 携带Token进行身份验证
      
      this.eventSource = new EventSource(`/dev-api/api/sales/sse?token=${this.$store.state.user.token}`);

      // 监听服务端推送的update事件
      this.eventSource.addEventListener('update', (event) => {
        try {
          const payload = JSON.parse(event.data);
          if (payload && typeof payload === 'object') {
            // 显式提取 Q1-Q4 字段（按顺序）
            const seriesData = ['Q1', 'Q2', 'Q3', 'Q4'].map(key => payload[key]);
            
            // 可选：校验数据有效性（如非空、数值类型）
            if (seriesData.every(v => typeof v === 'number' && !isNaN(v))) {
              this.option.series[0].data = seriesData;
              this.option.title.text = `${moment(payload.timestamp).format('YYYY年MM月DD日 HH:mm')} 实时数据`;
              this.chartInstance.setOption(this.option);
            } else {
              console.warn('Invalid data format:', seriesData);
            }
          }
        } catch (error) {
          console.error('Failed to parse event data:', error);
        }
      });

      // SSE连接异常处理（自动重连）
      this.eventSource.onerror = () => {
        this.eventSource.close();
        setTimeout(() => this.initSSE(), 5000);
      };
    },

    /** 响应式调整图表尺寸 */
    resizeChart() {
      this.chartInstance?.resize();
    }
  },
  beforeDestroy() {
    // 组件销毁前释放资源
    this.eventSource?.close();
    this.chartInstance?.dispose();
    window.removeEventListener('resize', this.resizeChart);
  }
};
</script>

<style scoped>
.line-chart-container {
  width: 100%;
  height: 100%;
  background: #f7f9fc;
  border-radius: 8px;
  padding: 15px;
}
</style>